<template>
	<view>
		<view>
			<!--#ifdef APP-PLUS-->
			<view class="lz-status_bar">
				<view class="lz-top_view"></view>
			</view>
			<!--#endif-->
			<!-- #ifndef MP-WEIXIN -->
			<view class="kaoshi-head">
				<view class="kaoshi-head-top">
					<view class="kaoshi-head-left">
						<view class="iconfont icon-zuojiantou" @tap="$navigateBack"></view>
					</view>
					<view class="kaoshi-head-m">选择科目</view>
					<view class="kaoshi-head-right"></view>
				</view>
			</view>
			<!--#endif-->
		</view>

		<view class="kaoshi-subject">
			<view class="classifybox">
				<view class="classify" v-for="(item, index) in list" :key="index" :class="classifytype == index ? 'active' : ''"
					@tap="changeclassify(index, item.id)">
					<view class="classifytext">{{ item.subject_name }}
						<view class="text-sm padding-top-sm">创建人:xxx</view>

					</view>
				</view>
			</view>
			<view class="liebiaobox">
				<view class="class" v-for="(item, index) in classlist" :key="index">
					<view :class="Subject_id == item.id ? 'active' : ''" class="classtext" @tap="tap_handle_choice_subject(item)">
						{{ item.subject_name }}</view>
					<view v-if="Subject_id == item.id" class="iconfont icon-dui1"></view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
import {
	mapState
} from 'vuex'
export default {
	data() {
		return {
			list: [], //科目列表
			Subject_id: 0, //已选的科目id
			classifytype: 0,
			classlist: [], //科目2级列表
		}
	},
	onShow() {
		// 获取科目列表
		this.getSub()
		this.Subject_id = this.subject.id
	},
	computed: {
		...mapState(['subject', 'userinfo', 'subjectVip'])
	},
	methods: {
		async getSub() {
			let res = await this.$myHttp.post({
				url: this.$myHttp.urlMap.subjectList,
				data: {
					page: 1,
					limit: 0
				},
				needLogin: false
			})
			if (res.code === 1) {
				this.list = res.data
				this.classlist = this.list[0].childlist
				console.log('%c [ this.classlist ]-72', 'font-size:13px; background:pink; color:#bf2c9f;', this.classlist)
			}
		},
		async tap_handle_choice_subject(item) {
			this.$store.commit('setSubject', {
				subject: {
					id: item.id,
					subject_name: item.subject_name
				}
			})
			if (this.userinfo.user_id !== undefined) {
				await this.$myUserLogin.getSubvip(this.subject.id)
			}
			// this.$myUtils.$router.switchTab({
			// 	url: '/pages/index/index'
			// })

			this.$openrul('/pages/questionBank/index')

		},
		changeclassify(index, id) {
			this.classifytype = index
			this.classlist = this.list[index].childlist
		}
	}
}
</script>
<style>
page {
	background: #fff
}


/* 首页头部 */
.kaoshi-head {
	background: #3a79f7;
	position: relative;
	top: 0;
	border-bottom: none;
}

.kaoshi-head-top {
	color: #fff;
	line-height: 58px;
}

.kaoshi-head-top .kaoshi-head-left {
	flex: 1;
	display: flex;
	align-items: center;
}

.kaoshi-head-top .kaoshi-head-left .icon-weibiaoti {
	padding-left: 4px;
	font-size: 18px;
}

.kaoshi-head-top .kaoshi-head-kemu {
	font-size: 16px;
	text-align: center;
}

.kaoshi-head-top .kaoshi-head-right {
	width: 18%;
	text-align: right;
}

.kaoshi-head-top .kaoshi-head-right .icon-datiqia {
	font-size: 22px;
}


.kaoshi-subject {
	display: flex;
	align-items: flex-start;
	background: #fff;
	height: 100vh;
}

.classifybox {
	width: 40%;
	background-color: #f6f9fc;
	height: 100vh;
}

.classify,
.class {
	display: flex;
	align-items: center;
	height: 50px;
}

.classifytext {
	margin-left: 15px;
	padding-left: 10px;
	font-size: 15px;
	line-height: 18px;
	border-left: 3px solid transparent;
}

.classify.active {
	background-color: #fff;
}

.classify.active .classifytext {
	border-left: 3px solid #3a79f7;
}

.liebiaobox {
	width: 60%;
	height: 100vh;
}

.class {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 15px;
	font-size: 14px;
}

.classtext.active {
	font-weight: bold;
}

.icon-dui1 {
	color: #0ec380;
}
</style>
